import React, { FC, useState } from "react";
import { Outlet } from "react-router-dom";
import style from "./ManageLayout.module.scss";
import { Button, Space, Divider, message } from "antd";
import {
  PlusOutlined,
  BarsOutlined,
  StarOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom";
import { LOGIN_PATHNAME } from "../router";
import { createQuestionService } from "../services/question";
import { useRequest } from "ahooks";

export default function ManageLayout() {
  const nav = useNavigate();
  const { pathname } = useLocation();

  // 用户体验优化： 在创建请求完成前，多次点击创建按钮，只执行一次
  // const [loading, setLoading] = useState(false);

  // async function onHandleCreateClick() {
  //   setLoading(true);
  //   const data = await createQuestionService();
  //   const {id } = data || {};
  //   if (id) {
  //     nav(`/question/edit/${id}`);
  //     message.success("创建成功");
  //   }
  //   setLoading(false);
  // }

  // 使用useRequest请求
  const {loading , run : onHandleCreateClick} = useRequest(createQuestionService,{
    manual : true ,
    onSuccess(result){
      // result 是第一个参数 createQuestionService 调借口返回的data
      console.log(result , 'result')
      nav(`/question/edit/${result.id}`)
      message.success('创建成功')
    }
  })
  return (
    <div className={style.container}>
      <div className={style.left}>
        <Space direction="vertical">
          <Button
            type="primary"
            size="large"
            icon={<PlusOutlined />}
            onClick={onHandleCreateClick}
            disabled={loading}
          >
            创建问卷
          </Button>
          <Divider style={{ borderTop: "transparent" ,margin: "12px 0"}} />
          <Button
            type={pathname.startsWith("/manage/list") ? "default" : "text"}
            size="large"
            icon={<StarOutlined />}
            onClick={() => nav("/manage/list")}
          >
            我的问卷
          </Button>
          <Button
            type={pathname.startsWith("/manage/star") ? "default" : "text"}
            size="large"
            icon={<BarsOutlined />}
            onClick={() => nav("/manage/star")}
          >
            星标问卷
          </Button>
          <Button
            type={pathname.startsWith("/manage/trash") ? "default" : "text"}
            size="large"
            icon={<DeleteOutlined />}
            onClick={() => nav("/manage/trash")}
          >
            回收站
          </Button>
        </Space>
      </div>
      <div className={style.right}>
        <Outlet />
      </div>
    </div>
  );
}
